<template>
	<view class="detail">
		<view class="headtop">
			<image src="../../../static/images/wode_bj.png" class="bj"></image>
			<view class="headtitile">
				<image src="../../../static/images/left.png" @click="fanhui"></image>
				<text>客户列表</text>
				<view @click="kaifacustomer" v-if="kfcount == 0 && list.length && tishistatus == 3">开发客户</view>
				<view @click="updatekaifacustomer" v-else-if="kfcount != 0">更新开发客户</view>
			</view>
			<view class="xinxi">
				<view class="top clearfix">
					<image :src="json.coverUrl" class="fl"></image>
					<view class="title fl">{{json.name}}</view>
					<view class="open fr" @click="openShangjia(json.outId)" v-if="json.outId != ''">打开抖音</view>
				</view>
				<view class="shuju clearfix">
					<view class="fl">
						<text class="name">联系方式</text>
						<text v-for="(item,index) in json.mobile" :key="index" class="desc"
							@click="call(item)">{{item}}</text>
					</view>
				</view>
				<view class="address">{{json.province}}{{json.city}}{{json.address}}{{json.fullAddress}}</view>
				<view class="customer clearfix">
					<view class="left fl">可开发<text>{{zqcount}}</text>个客户</view>
					<view class="left fr">已开发<text>{{kfcount}}</text>个客户</view>
				</view>
			</view>
		</view>
		<view class="refresh clearfix">
			<view class="fl" v-if="list.length && tishistatus == 2">正在更新</view>
			<view class="fl" v-if="list.length && tishistatus == 3" @click="zhuaqu">更新</view>
		</view>
		<view class="container" v-if="list.length">
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="shang clearfix">
					<image :src="item.avatar" class="fl"></image>
					<image :src="'data:image/jpeg;base64,' + item.avatar" class="fl" v-if="item.image_status == 2"></image>
					<view class="title fl">{{item.name}}</view>
					<view class="open fr" v-if="item.uid != ''" @click="openDouyin(item.uid)">打开抖音</view>
				</view>
				<view class="center">{{item.commentContent}}</view>
				<view class="time">{{item.commentTime}}</view>
			</view>
		</view>
		<view class="empty" v-else>
			<text v-if="tishistatus == 4">商家已注销,暂时无法获取</text>
			<text @click="zhuaqu" v-else-if="tishistatus == 0">立即获取数据</text>
			<text @click="zhuaqu" v-else-if="tishistatus == 3">立即获取数据</text>
			<text v-else>获取中,请耐心等待</text>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '@/api/request';

	export default {
		data() {
			return {
				tishistatus: 0,
				json: {

				},
				zqcount: 0,
				kfcount: 0,
				list: [],
				formData: {
					businessId: '',
					pageNo: 1,
					user_id: '',
					team_id: '',
				},
				timer: null,
				timers: null,
				Interval: null,
			}
		},
		onLoad() {
			let that = this;

			// 用户基本信息
			request({
				url: '/api/user/profile',
				method: 'GET',
				data: {},
				header: {
					'xx-token': uni.getStorageSync('token')
				}
			}).then((response) => {
				this.userData = response.data;

				uni.getStorage({
					key: 'json',
					success: function(res) {
						that.json = res.data;
						that.formData.businessId = res.data.outId;
						
						if(that.json.mobile){
							that.json.mobile = that.json.mobile.split(';');
						}

						// uni.removeStorage({
						// 	key: 'json'
						// })

						// 获取客户列表
						// that.getList();

						// 开发客户数量
						that.getKfcustomer();
						
						// 客户获取状态
						that.getStatus();
					}
				});
			}).catch((error) => {});
			
		},
		onReachBottom() {
			if(this.timer == null){
				this.formData.pageNo++;
				this.getList()
			}
		},
		methods: {
			refresh() {
				this.list = [];
				this.formData.pageNo = 1;

				this.getList();
				this.getKfcustomer();
			},
			// 已完成数据加载
			getList() {
				let that = this;

				request({
					url: '/api/usergroupbuy/auto_comment',
					method: 'POST',
					data: {
						user_id: that.userData.id,
						team_id: that.userData.team_id,
						pageNo: that.formData.pageNo,
						businessId: that.formData.businessId,
					},
					header: {
						'xx-token': uni.getStorageSync('token')
					}
				}).then((response) => {
					if (response.code == 1) {
						let list = response.data.list;
						for (let i = 0; i < list.length; i++) {
							list[i].commentTime = list[i].commentTime.substring(0, 10);
						}
						
						that.zqcount = response.data.count;
						
						if (list) {
							that.list.push(...list)
						} else {
							uni.showToast({
								title: '到底啦',
								icon: 'none'
							})
						}
					}
				}).catch((error) => {});
			},
			// 进行中数据加载
			getListJxz() {
				let that = this;
			
				request({
					url: '/api/usergroupbuy/auto_commentjxz',
					method: 'POST',
					data: {
						user_id: that.userData.id,
						team_id: that.userData.team_id,
						pageNo: that.formData.pageNo,
						businessId: that.formData.businessId,
					},
					header: {
						'xx-token': uni.getStorageSync('token')
					}
				}).then((response) => {
					if (response.code == 1) {
						let list = response.data.list;
						for (let i = 0; i < list.length; i++) {
							list[i].commentTime = list[i].commentTime.substring(0, 10);
						}
						
						if(response.data.count != that.zqcount){
							let cha = response.data.count - that.zqcount;
							// let i = that.kfcount;
							// if(i < that.zqcount){
							// 	that.Interval = setInterval(function(){
							// 		i += 1; // 设置每次增加的动态数字，可调整
							// 		if(i > that.zqcount) {
							// 			clearInterval(that.Interval); // 清除setInterval的time，这个方法w3c可具体查看文档
							// 			that.kfcount = that.zqcount;
							// 			i = 0;
							// 		}else{
							// 			that.kfcount = i
							// 		}
							// 	}, 50); // 数据跳转的速度控制
							// }
							
							that.zqcount = response.data.count;
						}
						
						if(that.timer == null){
							that.timers = setInterval(function(){
								console.log('执行第二个定时器')
								that.getStatus();
							},5000)
						}
			
						if (list) {
							that.list.unshift(...list)
						}
					}
				}).catch((error) => {});
			},
			getStatus() {
				let that = this;

				request({
					url: '/api/usergroupbuy/auto_comment_sj_status',
					method: 'POST',
					data: {
						user_id: that.userData.id,
						team_id: that.userData.team_id,
						businessId: that.formData.businessId,
					},
					header: {
						'xx-token': uni.getStorageSync('token')
					}
				}).then((response) => {
					if(response.data.data.business_status === 0){
						if (response.data.data.status == 0) {
							that.tishistatus = 1; //待获取
						}else if (response.data.data.status == 1) {
							that.tishistatus = 2; //进行中

							clearInterval(that.timers)
							that.timers = null;
							
							that.getListJxz()
						}else if (response.data.data.status == 2) {
							that.tishistatus = 3; //已完成
							
							clearInterval(that.timer)
							that.timer = null;

							clearInterval(that.timers)
							that.timers = null;
							
							that.list = [];
							that.formData.pageNo = 1;
							that.getList()
						}
					}else{
						that.tishistatus = 4;
						
						clearInterval(that.timer)
						that.timer = null;
						
						clearInterval(that.timers)
						that.timers = null;
					}
				}).catch((error) => {});
			},
			zhuaqu() {
				let that = this;
				
				request({
					url: '/api/usergroupbuy/auto_comment_add',
					method: 'POST',
					data: {
						user_id: that.userData.id,
						team_id: that.userData.team_id,
						businessId: that.formData.businessId,
						name: that.json.name,
					},
					header: {
						'xx-token': uni.getStorageSync('token')
					}
				}).then((response) => {
					uni.showToast({
						title: response.msg,
						icon: 'none'
					})

					that.timer = setInterval(function(){
						console.log('执行第一个定时器')
						that.getStatus();
					},5000)
				}).catch((error) => {});
			},
			getKfcustomer() {
				let that = this;

				request({
					url: '/api/usergroupbuy/api_comment',
					method: 'POST',
					data: {
						user_id: that.userData.id,
						pageNo: 1,
						businessId: that.formData.businessId,
					},
					header: {
						'xx-token': uni.getStorageSync('token')
					}
				}).then((response) => {
					if (response.code == 1) {
						that.kfcount = response.data.count;
					}
				}).catch((error) => {});
			},
			kaifacustomer() {
				let that = this;

				uni.showModal({
					title: '提示', // 对话框标题
					content: '您确认开发么？', // 显示的内容
					showCancel: true, // 是否显示取消按钮
					success: function(res) {
						if (res.confirm) {
							uni.showToast({
								title: '操作成功',
								icon: 'none'
							})
							
							request({
								url: '/api/usergroupbuy/api_comment_add',
								method: 'POST',
								data: {
									user_id: that.userData.id,
									team_id: that.userData.team_id,
									businessId: that.formData.businessId,
									business_info: that.json,
								},
								header: {
									'xx-token': uni.getStorageSync('token')
								}
							}).then((response) => {
								that.getKfcustomer();
							}).catch((error) => {});
						}
					},
				})
			},
			updatekaifacustomer() {
				let that = this;

				uni.showModal({
					title: '提示', // 对话框标题
					content: '您确认更新开发么？', // 显示的内容
					showCancel: true, // 是否显示取消按钮
					success: function(res) {
						if (res.confirm) {
							uni.showToast({
								title: '操作成功',
								icon: 'none'
							})
							
							request({
								url: '/api/usergroupbuy/api_comment_add',
								method: 'POST',
								data: {
									user_id: that.userData.id,
									team_id: that.userData.team_id,
									businessId: that.formData.businessId,
									business_info: that.json,
								},
								header: {
									'xx-token': uni.getStorageSync('token')
								}
							}).then((response) => {
								that.getKfcustomer();
							}).catch((error) => {});
						}
					},
				})
			},
			openDouyin(uid) {
				const appurl = 'snssdk1128://user/profile/' + uid
				// #ifdef APP-PLUS
				plus.runtime.openURL(appurl, function(res) {
					console.log(res);
				});
				// #endif
			},
			openShangjia(id) {
				const appurl = 'snssdk1128://poi/detail/?id=' + id; //打开团购商家主页
				// #ifdef APP-PLUS
				plus.runtime.openURL(appurl, function(res) {
					console.log(res);
				});
				// #endif
			},
			call(item) {
				//#ifdef MP-WEIXIN
				uni.makePhoneCall({
				   phoneNumber: item
				});
				//#endif
				//#ifdef APP-PLUS
				plus.device.dial(item, true);
				//#endif
			},
			fanhui() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.detail {
		width: 100%;
		margin: 0 auto;

		.headtop {
			width: 100%;
			margin: 0 auto;
			position: relative;
			height: 450rpx;
			z-index: 200;
			border-bottom: 1rpx solid #31353E;

			.bj {
				width: 100%;
				height: 286rpx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}

			.headtitile {
				width: 94%;
				margin: 0 auto;
				position: absolute;
				top: 94rpx;
				left: 3%;

				image {
					width: 20rpx;
					height: 36rpx;
					float: left;
					margin-right: 18rpx;
					margin-top: -3rpx;
				}

				text {
					height: 36rpx;
					line-height: 36rpx;
					font-size: 32rpx;
					color: #FFFFFF;
					float: left;
				}

				view {
					height: 36rpx;
					line-height: 36rpx;
					font-size: 30rpx;
					color: #ECDEA4;
					float: right;
				}
			}

			.xinxi {
				width: 94%;
				margin: 0 auto;
				position: absolute;
				top: 170rpx;
				left: 3%;

				.top {
					width: 100%;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						display: flex;
						margin-right: 20rpx;
					}

					.title {
						height: 80rpx;
						line-height: 80rpx;
						font-size: 30rpx;
						color: #FFFFFF;
						width: 60%;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
					}

					.open {
						width: 140rpx;
						height: 56rpx;
						text-align: center;
						line-height: 56rpx;
						background: linear-gradient(270deg, #EAC59F, #E4B985, #FFF9CE);
						color: #806B1A;
						border-radius: 28rpx;
						font-size: 24rpx;
						margin-top: 12rpx;
					}
				}

				.shuju {
					width: 100%;
					margin-top: 25rpx;

					view {
						width: 100%;

						text.name {
							font-size: 26rpx;
							color: #FFFFFF;
							font-weight: 700;
							margin-right: 16rpx;
						}

						text.desc {
							font-size: 26rpx;
							color: #ABB0CC;
							margin-right: 12rpx;
						}
					}
				}

				.address {
					width: 100%;
					margin-top: 24rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
				}

				.customer {
					width: 100%;
					margin-top: 22rpx;

					.left {
						font-size: 24rpx;
						color: #C6B28F;

						text {
							font-weight: 700;
							color: #FFAB1B;
						}
					}
				}
			}
		}

		.refresh {
			width: 94%;
			margin: 22rpx auto;
			color: #ECDEA4;
			font-size: 32rpx;
			text-align: right;
		}

		.container {
			width: 94%;
			margin: 22rpx auto;

			.list {
				width: 100%;
				padding: 21rpx 29rpx 28rpx 21rpx;
				box-sizing: border-box;
				background: #242831;
				border-radius: 10rpx;
				margin-bottom: 20rpx;

				.shang {
					width: 100%;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						border: 1rpx solid #E8BD70;
						margin-right: 21rpx;
					}

					.title {
						font-size: 30rpx;
						color: #FFFFFF;
						height: 80rpx;
						line-height: 80rpx;
					}

					.open {
						width: 140rpx;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						color: #ECDEA4;
						border: 1rpx solid #ECDEA4;
						font-size: 24rpx;
						border-radius: 25rpx;
						margin-top: 14rpx;
					}
				}

				.center {
					width: 100%;
					margin-top: 18rpx;
					font-size: 26rpx;
					color: #ABB0CC;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					/* 限制显示的行数 */
				}

				.time {
					width: 100%;
					margin-top: 20rpx;
					text-align: right;
					font-size: 24rpx;
					color: #787B8F;
				}
			}
		}

		.empty {
			width: 100%;
			margin-top: 200rpx;
			text-align: center;

			text {
				font-size: 30rpx;
				color: #ABB0CC;
			}
		}
	}
</style>